import React, {useState, useEffect} from 'react';
import {connect} from 'react-redux';
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  Image,
  Button,
  Pressable,
  LogBox,
} from 'react-native';
import {setStore, getStore} from '../../utils/storage';
import {goodsRealPrice} from '../../api/index.js';

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import TopHeader from '../../components/TopHeader';

const Home = ({navigation, user}) => {
  const [btcInfo, setBtcInfo] = useState({});
  const getData = async function () {
    const res = await goodsRealPrice({
      symbol: 'BTC',
    });
    console.log(res);
    if (res.code === 1000) {
      setBtcInfo(res.data);
    }
  };

  useEffect(() => {
    async function getStores() {
      const storeToken = await getStore('token');
      const storeUserId = await getStore('user_id');
      console.log(storeToken, storeUserId);
    }
    getStores();
    getData();
    const timer = setInterval(() => {
      getData();
    }, 3 * 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <TopHeader {...{navigation}} />
        <View style={styles.personalContainer}>
          <View style={styles.personal}>
            <View style={styles.personalId}>
              <MaterialCommunityIcons
                name="account-circle"
                color="#000"
                size={40}
              />
              <Text style={styles.idText}>ID {user.serial}</Text>
            </View>
            <View style={styles.moneyContainer}>
              <View style={styles.moneyContainerLeft}>
                <MaterialCommunityIcons
                  name="currency-usd"
                  color="#000"
                  size={40}
                />
                <Text style={styles.moneyText}>{user.wallet.total}</Text>
              </View>
              <View style={styles.moneyContainerRight}>
                {user.growth > 0 && (
                  <MaterialCommunityIcons
                    name="triangle"
                    color="#009900"
                    size={16}
                  />
                )}
                {user.growth < 0 && (
                  <MaterialCommunityIcons
                    name="triangle"
                    color="#009900"
                    size={16}
                  />
                )}
                <Text style={styles.changeText}>
                  {user.growth} ({user.growth_rate})
                </Text>
              </View>
            </View>
          </View>
        </View>
        <View style={styles.nav}>
          <View style={styles.navItem}>
            <Text style={styles.navActive}>我的最愛</Text>
          </View>
          <View style={styles.navItem}>
            <Text style={styles.navNormal}>執行中訂單</Text>
          </View>
        </View>
        <View style={styles.financeTitleContainer}>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}>名稱</Text>
          </View>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}>價格</Text>
          </View>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}>漲跌</Text>
          </View>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}>漲幅</Text>
          </View>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}>走勢</Text>
          </View>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}> </Text>
          </View>
        </View>
        <Pressable
          style={styles.financeRowContainer}
          onPress={() => navigation.navigate('BetScreen')}>
          <View style={styles.financeRowContainerItem}>
            <Text style={styles.financeRowContainerItemText}>
              <MaterialCommunityIcons
                name="currency-btc"
                color="#000"
                size={24}
              />
              Bitcoin
            </Text>
          </View>
          <View style={styles.financeRowContainerItem}>
            <Text style={styles.financeRowContainerItemText}>59,745,00</Text>
          </View>
          <View style={styles.financeRowContainerItem}>
            {btcInfo.priceChange > 0 ? (
              <Text style={styles.financeRowContainerItemText2}>
                {btcInfo.priceChange}
              </Text>
            ) : (
              <Text style={styles.financeRowContainerItemText3}>
                {btcInfo.priceChange}
              </Text>
            )}
          </View>
          <View style={styles.financeRowContainerItem}>
            {btcInfo.priceChangePercent > 0 ? (
              <Text style={styles.financeRowContainerItemText2}>
                ▼({btcInfo.priceChangePercent}%)
              </Text>
            ) : (
              <Text style={styles.financeRowContainerItemText3}>
                ▼({btcInfo.priceChangePercent}%)
              </Text>
            )}
          </View>
          <View style={styles.financeRowContainerItem}>
            <Text style={styles.financeRowContainerItemText}>走勢</Text>
          </View>
          <View style={styles.financeRowContainerItem}>
            <MaterialCommunityIcons
              name="chevron-right"
              color="#000"
              size={20}
            />
          </View>
        </Pressable>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
  },
  personalContainer: {
    paddingTop: 15,
    paddingLeft: 10,
    paddingRight: 10,
  },
  personal: {
    borderColor: '#a8a8a8',
    borderWidth: 1,
    borderRadius: 10,
    padding: 15,
    paddingTop: 10,
    paddingBottom: 10,
  },
  personalId: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    height: 50,
  },
  idText: {
    color: '#666',
    fontSize: 26,
    fontWeight: 'bold',
    marginLeft: 5,
  },
  moneyContainer: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    height: 50,
  },
  moneyContainerLeft: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexDirection: 'row',
  },
  moneyText: {
    color: '#666',
    fontSize: 26,
    fontWeight: 'bold',
    marginLeft: 5,
  },
  moneyContainerRight: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexDirection: 'row',
  },
  changeText: {
    color: '#009900',
    fontSize: 14,
  },
  nav: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    marginTop: 4,
    height: 30,
  },
  navItem: {
    paddingLeft: 10,
    paddingRight: 10,
  },
  navActive: {
    color: '#169BD5',
    fontSize: 14,
    fontWeight: 'bold',
  },
  navNormal: {
    color: '#999999',
    fontSize: 14,
    fontWeight: 'bold',
  },
  financeTitleContainer: {
    display: 'flex',
    flexDirection: 'row',
    backgroundColor: '#F2F2F2',
    height: 30,
    marginTop: 4,
    borderBottomColor: '#797979',
    borderBottomWidth: 1,
  },
  financeTitleContainerItem: {
    paddingLeft: 5,
    paddingRight: 5,
    flexGrow: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  financeTitleContainerItemText: {
    color: '#666',
    fontSize: 16,
    fontWeight: 'bold',
  },
  financeRowContainer: {
    display: 'flex',
    flexDirection: 'row',
    height: 56,
    borderBottomColor: '#797979',
    borderBottomWidth: 1,
    borderRightColor: '#797979',
    borderRightWidth: 1,
    borderLeftColor: '#797979',
    borderLeftWidth: 1,
  },
  financeRowContainerItem: {
    paddingLeft: 5,
    paddingRight: 5,
    flexGrow: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  financeRowContainerItemText: {
    color: '#666',
    fontSize: 16,
    fontWeight: 'bold',
  },
  financeRowContainerItemText2: {
    color: '#009900',
    fontSize: 16,
    fontWeight: 'bold',
  },
  financeRowContainerItemText3: {
    color: '#FF0052',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

// 3. select函数
function select(state) {
  console.log(state);
  // state
  return {
    user: state.user,
  };
}

export default connect(select)(Home);
